<!DOCTYPE html>
<html>
<head>
<title>homePage.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<style>
body {
	background: url(./resources/img/homepage.jpg) no-repeat center center
		fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 100%;
	font-family: "Microsoft YaHei";
	font-weight: bold;
}

#homePageLeft {
	background-color: #000000;
	background-color: rgba(0, 0, 0, 0.4);
	width: 33%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

#homePageLeftText {
	width: 80%;
	height: 50%;
	position: relative;
	left: 50%;
	top: 50%;
	margin-top: -35%;
	margin-left: -35%;
	color: #fff;
}

#homePageLeftText ul {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	list-style: none;
}

#homePageLeftText li {
	margin-top: 30px;
	margin-bottom: 30px;
}

.homePageLeftText1 {
	display: none;
}

.homePageLeftText2 {
	display: none;
	margin-left: 25%;
}
/* 数据图样式*/
.echartShortSize {
	position: absolute;
	top: 0px;
	left: 35%;
	width: 50%;
	height: 100%;
	display: none;
	background-color: rgba(255, 255, 255, 0.8);
}

.echartLongSize {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}

#chartFrame {
	width: 100%;
}

#chartFrame ul {
	list-style: none;
	width: 100%;
	height: 50%;
}

#chartFrame ul li {
	float: left;
	width: 50%;
}

#echarts_bar {
	float: left;
	position: relative;
	width: 500px;
	height: 300px;
}

#echarts_pie {
	float: left;
	position: relative;
	width: 500px;
	height: 300px;
}
</style>
<link rel="stylesheet" href="./lib/layui-v2.1.6/layui/css/layui.css">
<body>
	<div id="homePage">
		<div id="homePageLeft">
			<div id="homePageLeftText">
				<ul>
					<li class="homePageLeftText1"><i>您已进入---</i></li>
					<li class="homePageLeftText2"><i>医疗系统（理疗方向）</i></li>
					<li class="homePageLeftText2"><i>Medical System</i></li>
					<li id="li_btn" ><button class="layui-btn layui-btn-lg homePageLeftText2" style="position:absolute;">门诊费用数据图</button></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="datagram" class="echartShortSize">
		<div id="chartFrame">
			<ul>
				<li>
					<div id="echarts_bar"></div>
				</li>
				<li>
					<div id="echarts_pie"></div>
				</li>
			</ul>
		</div>
	</div>
</body>
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/layui-v2.1.6/layui/layui.js"></script>
<script src="./lib/echart/echarts.js"></script>
<script src="./resources/js/util.js"></script>
<script>
	//基于准备好的DOM，初始化echarts实例
	var barChart = echarts.init(document.getElementById('echarts_bar'));
	var pieChart = echarts.init(document.getElementById('echarts_pie'));
	$('#echarts_pie').hide();
	
	var tableData; //图表总数据
	var loginUser = JSON.parse(localStorage.getItem("loginUser"));
	
	$(function() {
		initFrame();
	});

	function initFrame() {
		
		if(loginUser.permission.getReport < 3) {
			hide("#li_btn");
		}
		
		selfAdaption(); //屏幕自适应设置
		initChartData(); //初始化图表
		initEvent();//监听事件
	}
	function initEvent() {  //监听事件
	  	$('.homePageLeftText1').fadeIn(1500);
	  	$('.homePageLeftText2').slideDown(1500);
	  	$('#homePageLeftText button').mouseenter(function(){
	  		$('#datagram').show(1000);		//鼠标指在数据图按钮时显示数据表，饼图不显示
	  	});
	  	$('#homePageLeftText button').mouseleave(function(){
	  		//barChart.clear();								//鼠标离开数据图按钮时隐藏数据表
	  		//pieChart.clear();
	  		$('#datagram').hide();
	  	});
	  	$('#homePageLeftText button').click(function(){
	  		$('#homePageLeftText button').unbind("mouseleave");		//点击数据图按钮时移除mouseleave绑定
	  		//barChart.clear();								//鼠标离开数据图按钮时隐藏数据表
	  		//pieChart.clear();
	  		$('#datagram').hide();									
	  		$('#datagram').removeClass('echartShortSize');			//更改图表样式，使饼图也显示出来
	  		$('#datagram').addClass('echartLongSize');
	  		$('#echarts_pie').show();
	  		$('#datagram').fadeIn(500);
	  	});
	}
	
	function initChartData() { //初始化图表数据
		//{profit:[],income:[],cost:[]}
		/* var param = {
			date : formatDate(new Date()),
		}; */
		$.ajax({
			type : "post",
			url : "./reportController/getIndexReport",
			data : "",
			success : function(response) {
				if (response.code == 405) {
					console.error(response);
				}
				if (response.code == 200) {
					tableData = response.result;
					initChartFrame(response.result);
				} else {
					console.error(response);
				}
			},
		});
	}

	function initChartFrame(data) { //初始化图表
		//console.log("initChartFrame");
		//console.log("initChartFrame.data");
		//console.log(data);
		var now = new Date();
		//柱状图数据
		var barTitle = now.getFullYear() + "统计表";

		//饼图数据
		var pieTitle = (now.getMonth() + 1) + "月费用详情图";
		var pieData = {
			income : data.income[data.income.length - 1],
			cost : Math.abs(data.cost[data.cost.length - 1]),
		};

		//指定图表的配置项和数据
		barChart.setOption(getBarOption(barTitle, data), true);
		pieChart.setOption(getPieOption(pieTitle, pieData), true);
	}

	$(window).resize(function() {
		//console.log("window.resize");
		selfAdaption();
	});

	barChart.on('click', function(params) {
		//console.log("barChart.onClinic.params");
		//console.log(params);
		var index = 0;
		for (var i = 0; i < tableData.date.length; i++) {
			//console.log("barChart.onClinic.params");
			//console.log(tableData.date[i]);
			//console.log(params.name);
			//console.log(params.name == tableData.date[i]);
			if (tableData.date[i] == params.name) {
				index = i;
				break;
			}
		}
		var pieData = {
			income : tableData.income[index],
			cost : Math.abs(tableData.cost[index]),
		};
		if (params.value) {
			if (params.name.indexOf('月') > 0) { //判断是否点击了图表的Y轴
				var pieTitle = params.name + '费用详情图';
				pieChart.setOption(getPieOption(pieTitle, pieData), true);
			}
		}
	});

	function getBarOption(barTitle, data) {
		//console.log("getBarOption.data");
		//console.log(data);
		var barOption = {
			baseOption : {
				title : {
					text : barTitle,
					top : '3%'
				},
				legend : {
					data : [ '利润', '支出', '收入' ],
					top : '4%',
					left : '30%'
				},
				timeline : {
					axisType : 'category',
					show : false,
					autoPlay : false,
					data : "", //以当前年份为终点，取十年间数据
				},
				grid : {
					left : '5%',
					right : '4%',
					bottom : '10%',
					top : '10%',
					containLabel : true
				},
				xAxis : {
					type : 'value'
				},
				yAxis : {
					type : 'category',
					axisTick : {
						show : false
					},
					data : data.date,
					axisLabel : { //文字标签添加事件
						clickable : true
					}
				},
				series : [ {
					type : 'bar',
				}, ],
				tooltip : {
					trigger : 'axis',
					axisPointer : {
						type : 'shadow'
					}
				}
			},
			options : [ {
				series : [ {
					name : '利润',
					type : 'bar',
					label : {
						normal : {
							show : true,
							position : 'inside'
						}
					},
					data : data.profit
				}, {
					name : '收入',
					type : 'bar',
					stack : '总量',
					label : {
						normal : {
							show : true
						}
					},
					data : data.income
				}, {
					name : '支出',
					type : 'bar',
					stack : '总量',
					label : {
						normal : {
							show : true,
							position : 'left'
						}
					},
					data : data.cost
				} ]
			} ]
		};
		return barOption;
	}

	function getPieOption(pieTitle, data) {
		var pieOption = {
			title : {
				text : pieTitle,
				left : '35%',
				top : '10%'
			},
			legend : {
				top : '85%',
				left : '50%',
				data : [ '收入', '支出' ]
			},
			tooltip : {
				trigger : 'item',
				axisPointer : {
					type : 'shadow'
				}
			},
			series : [ {
				name : '费用类型',
				type : 'pie',
				radius : '50%',
				itemStyle : {
					normal : {
						label : {
							show : true,
							position : 'outside',
							formatter : '{b} : {d}%',
						},
					}
				},

				selectedOffset : '10',
				center : [ '45%', '50%' ],
				data : [ {
					value : data.income,
					name : '收入'
				}, {
					value : data.cost,
					name : '支出'
				}, ]

			} ]
		};
		return pieOption;
	}

	//将new Date() -> yyyy-MM-dd
	function formatDate(date) {
		var result = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
		return result;
	}

	//屏幕自适应设置
	function selfAdaption() {
		var echartsWidth = window.innerWidth * 0.5 + 'px';
		var echartHeight1 = window.innerHeight * 0.95 + 'px';
		var echartHeight2 = window.innerHeight + 'px';
		var chartWidth = window.innerWidth + 'px';
		var chartHeight = window.innerHeight + 'px';
		$('#chartFrame').css({
			'height' : chartHeight
		});
		$('#chartFrame').css({
			'weight' : chartWidth
		});
		$('#echarts_bar').css({
			'width' : echartsWidth,
			'height' : echartHeight1
		});
		$('#echarts_pie').css({
			'width' : echartsWidth,
			'height' : echartHeight2
		});
		barChart.resize();
		pieChart.resize();
	}
</script>
</html>
